<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .chatwindow {
      width: 640px;
      height: 600px;
      background: url(./img/chatWindow.jpg) left top no-repeat;
      border-radius: .25em;
      overflow: hidden;
      margin: 0 auto;
      box-sizing: border-box;
      border: 1px solid #e4e4e4;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, .3);
      position: relative;
    }

    .chatwindow .chatcontent {
      width: 638px;
      height: 390px;
      /* border: 1px solid black; */
      margin: 0;
      padding: 0;
      position: absolute;
      top: 84px;
      box-sizing: border-box;
      padding: 20px;
      overflow-y: auto;
    }

    .chatwindow .chatcontent li {
      list-style: none;
      float: left;
      width: auto;
      max-width: 70%;
      clear: both;
      margin: 5px 0;
      background: url(./img/msgleft.png) left top no-repeat;
      background-size: 100% 100%;
      padding: 10px 10px 10px 15px;
      color: white;
    }

    .chatwindow .count {
      position: absolute;
      top: 488px;
      text-indent: 2em;
      font-size: 10px;
      color: white;
    }

    .chatwindow .count span {
      font-weight: bold;
    }

    .chatwindow .chatcontent .me {
      float: right;
      width: auto;
      max-width: 70%;
      background: url(./img/msgright.png) left top no-repeat;
      background-size: 100% 100%;
      padding: 10px 15px 10px 10px;
    }

    .chatwindow .inputwindow {
      background: none;
      outline: none;
      width: 638px;
      height: 55px;
      resize: none;
      box-sizing: border-box;
      position: absolute;
      top: 515px;
      padding: 5px 10px;
      border: none;
    }

    .btn {
      border: none;
      background: none;
      outline: none;
      cursor: pointer;
    }

    .btn-normal {
      background: #c1e7f6;
    }

    .chatwindow-btn {
      padding: 3px 20px;
      position: absolute;
      right: 18px;
      bottom: 5px;
      font-size: 12px;
    }

    .chatwindow .error {
      width: 100%;
      text-align: center;
      color: white;
      background: rgba(255, 0, 0, 0.63);
      padding: 5px 0;
      /* display: none; */
      position: absolute;
      top: 40px;
    }

    .chatwindow h1 {
      font-size: 18px;
      margin: 0;
      padding: 0;
      text-indent: 2em;
      margin-top: 10px;
      color: white;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, .2);
    }
  </style>
  <script src="http://192.168.2.2:8080/socket.io/socket.io.js"></script>
  <script>
    window.onload = function() {
      let oTxt = document.getElementById('txt1');
      let oBtn = document.getElementById('btn1');
      let oUl = document.getElementById('ul1');
      let oSpan = document.getElementById('sp1');

      let sock = io.connect('ws://192.168.2.2:8080/');

      sock.on('connect', () => {
        document.getElementsByClassName('error')[0].style.display = 'none';
        oBtn.style.cursor = 'pointer';

        // 点击发送消息
        oBtn.onclick = () => {
          if (oTxt.value != '') {

            sock.emit('msg', oTxt.value);

            let oLi = document.createElement('li');
            oLi.innerHTML = oTxt.value;
            oLi.className = 'me';
            oUl.appendChild(oLi);
            oTxt.value = '';

            oTxt.focus(); //聚焦

            oUl.scrollTo(0, oUl.scrollHeight);
          }
        };

        document.onkeydown = function(ev) {
          let oEvent = ev || event;
          if (oEvent.keyCode == 13) {
            oBtn.onclick();
          }
        }

      });
      // 收到消息后显示
      sock.on('msg', str => {
        let oLi = document.createElement('li');
        oLi.innerHTML = str;
        oUl.appendChild(oLi);

        oUl.scrollTo(0, oUl.scrollHeight);
      });
      sock.on('count', num => {
        oSpan.innerHTML = num;
      });
      sock.on('disconnect', () => {
        document.getElementsByClassName('error')[0].style.display = 'block';
        oBtn.style.cursor = 'not-allowed';

        oBtn.onclick = null;
      });



    };
  </script>

</head>

<body>

  <div class="chatwindow">
    <h1>WebSocket 聊天室 demo</h1>
    <div class="error">
      未连接服务器，请检查网络
    </div>

    <ul id="ul1" class="chatcontent">
    </ul>
    <div class="count">
      目前聊天室中有： <span id="sp1">0</span> 人
    </div>
    <textarea id="txt1" class="inputwindow" cols="30" rows="10"></textarea>

    <input id="btn1" class="btn btn-normal chatwindow-btn" type="button" value="发送(Enter)">
  </div>

</body>

</html>
